<script>
import { listStat } from '@/api/web/stat'
export default {
  name: 'StatementIndex',
  data() {
    return {
      dateRange: [],
      // 客户数据
      tableData: []
    }
  },
  methods: {
    initData() {
      if (this.dateRange.length <= 1) {
        this.$message.error('请选择日期范围')
        return
      }
      listStat({
        startAt: this.dateRange[0],
        endAt: this.dateRange[1]
      }).then(res => {
        this.tableData = res.data
      })
    },

    /** 导出按钮操作 */
    handleExport() {
      if (this.tableData.length === 0) {
        this.$message.error('没有数据')
        return
      }
      this.download('web/stat/export', {
        startAt: this.dateRange[0],
        endAt: this.dateRange[1]
      }, `stat_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>

<template>
  <div>
    <div class="pageTopTitle">统计报表</div>
    <div class="app-container">
        <div class="chart-container">
          <div style="display: flex;">
            <el-date-picker
              v-model="dateRange"
              end-placeholder="结束日期"
              range-separator="至"
              start-placeholder="开始日期"
              type="daterange"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <div class="ml20">
              <el-button icon="el-icon-search" type="primary" @click="initData">查询</el-button>
            </div>
          </div>
          <el-button icon="el-icon-download" plain type="warning" @click="handleExport">导出</el-button>
        </div>

        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            label="日期"
            prop="date"
          >
          </el-table-column>
          <el-table-column
            label="客户数据"
          >
            <template slot-scope="scope">
              <div>个人客户：{{ scope.row.个人客户 }}</div>
              <div>企业客户：{{ scope.row.企业客户 }}</div>
              <div>机构客户：{{ scope.row.机构客户 }}</div>
              <div>其他客户：{{ scope.row.其他客户 }}</div>
              </template>
          </el-table-column>
          <el-table-column
            label="项目数据"
          >
            <template slot-scope="scope">
              <div>内训项目：{{ scope.row.内训项目 }}</div>
              <div>咨询项目：{{ scope.row.咨询项目 }}</div>
              <div>公开课：{{ scope.row.公开课 }}</div>
              <div>陪跑项目：{{ scope.row.陪跑项目 }}</div>
              <div>其他项目：{{ scope.row.其他项目 }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="渠道数据"
          >
            <template slot-scope="scope">
              <div>下级渠道：{{ scope.row.下级渠道 }}</div>
              <div>客户总数：{{ scope.row.客户总数 }}</div>
              <div>项目总数：{{ scope.row.项目总数 }}</div>
              <div>成交业绩：{{ scope.row.成交业绩 }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
  </div>
</template>

<style lang="scss" scoped>
.chart-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.box-item {
  position: relative;
  background-color: #F3F5F7;
  padding: 20px 24px;
  border-radius: 8px;

  .box-icon {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 36px;
    right: 28px;
  }
}


</style>
